<template>
    <a-control-group>
        <a-button class="a-input-radio-button" :color="formItemHook.myColor" :size="formItemHook.mySize" :sharp="formItemHook.mySharp" :disabled="formItemHook.myDisabled || props.getDisabledFunc(a)" :plain="props.plain" v-for="a in props.items" :key="props.getTextFunc(a)" @click="methods.input(a)"><span class="fa fa-fw" :class="[
            value === props.getValueFunc(a)
                ? 'fa-dot-circle-o'
                : 'fa-circle-o',
        ]"></span>{{ props.getTextFunc(a) }}</a-button>
    </a-control-group>
</template>

<script setup lang="ts">
import { InputPropsType } from '@/types'
import AButton from './AButton.vue'
import AControlGroup from './AControlGroup.vue'
import { useFormItem } from '@/hooks/useFormItem'
import { useInput } from '@/hooks/useInput'

interface PropsType extends InputPropsType<any, never> {
    plain?: boolean
    items?: any[]
    getTextFunc?: (a: any) => string
    getValueFunc?: (a: any) => any
    getDisabledFunc?: (a: any) => boolean
}
const props = withDefaults(defineProps<PropsType>(), {
    value: undefined,
    color: undefined,
    disabled: undefined,
    size: undefined,
    sharp: undefined,
    rules: () => [],
    isInner: false,
    plain: false,
    items: () => [],
    getTextFunc: (a: any) => a.text,
    getValueFunc: (a: any) => a.value,
    getDisabledFunc: (a: any) => a.disabled,
})

const emit = defineEmits<{
    (e: 'update:value', value: any): void
}>()
useInput(props)
const formItemHook = useFormItem(props)

const methods = {
    input(val: any) {
        emit('update:value', val)
    },
}
</script>